<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="聊天系列">
        <a href="#">
          <h2>聊天系列</h2>
        </a>
      </div>
      <div slot="context">
        <div style="display: flex;justify-content:center;width:calc(100% - 201px);margin-top: 20px">
          <el-card class="header-card">
            <div slot="header" class="clearfix">
              <span>在线群友</span>
            </div>
            <div v-for="(user,index) in user_list" :key="index" class="text item">
              {{user.username}}<span v-if="userInfo.nickname===user.username">(自己)</span>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="text-align: center">在线聊天室</span>
            </div>
            <ul id="msg_box" class="infinite-list" style="overflow:auto">
              <li v-for="(message,index) in message_list" :key="index" class="text item">
                <div style="display: flex;">
                  <el-image
                          style="width: 50px; height: 50px;border-radius: 5px 5px 5px 5px"
                          :src="message.avatar"
                          fit="contain"></el-image>
                  <div style="margin-left: 15px;position: relative">
                    <div class="user_text"><p>{{message.username}}</p></div>
                    <div class="first">
                      <p>{{message.text}}</p>
                      <span class="top"></span>
                    </div>
                  </div>

                </div>
              </li>
            </ul>
            <div style="display: flex;padding: 18px 20px;box-sizing: border-box;margin: 0;">
              <el-input

                      @keyup.enter.native="sendMessage()"
                      placeholder="请输入内容"
                      v-model="input"
                      clearable>
                <!--               <template slot="append"><el-button type="success">发送</el-button></template>-->
              </el-input>
              <el-button type="success" @click="sendMessage()">发送</el-button>

            </div>
          </el-card>
        </div>


      </div>
    </home>
  </div>
</template>

<script>
  import Home from "../home/Home";

  export default {
    name: "LoginChat",
    components: {Home},
    data() {
      return {
        user_list: [],
        message_list: [],
        count: 0,
        input: '',
        userInfo: null
      }
    },
    // 当路由离开时
    beforeDestroy() {
      let leaveRoom = {
        code: 888,
        msg: this.userInfo.token
      }
      this.sendWebSocketMsg(leaveRoom)
    },
    methods: {
      load() {
        this.$message({
          message: '请输入内容',
          type: 'warning'
        });
      },
      sendMessage() {
        if (!this.input) {
          this.load()
          return
        }
        let textmsg = {
          code: 200,
          msg: {
            token: this.userInfo.token,
            text: this.input
          }
        }
        // 提交
        this.sendWebSocketMsg(textmsg)
      },
      initWebSocket() {
        // 初始化websocket
        // 连接服务器
        this.websock = new WebSocket("ws://127.0.0.1:8000/chat-channel");
        // 指定事件回调
        this.websock.onmessage = this.websocketOnMessage;
        this.websock.onopen = this.websocketOnOpen;
        this.websock.onerror = this.websocketOnError;
        this.websock.onclose = this.websocketClose;
      },
      websocketOnMessage(e) {
        let message = JSON.parse(e.data)
        if (message.code === 100 || message.code === 888) {
          this.user_list = message.userlist
        }
        if (message.code === 200) {
          this.message_list.push(message.msg)
          this.$nextTick(function () {
            this.input = ""
            let div = document.getElementById('msg_box')
            div.scrollTop = div.scrollHeight
          })
        }
        console.log(message);
      },
      sendWebSocketMsg(msg) {
        this.websock.send(JSON.stringify(msg))
      },
      websocketOnOpen(e) {
        console.log(e);
        let token = this.userInfo.token
        let enterroom = {
          code: 100,
          msg: token
        }
        this.sendWebSocketMsg(enterroom)
      },
      websocketOnError(e) {
        console.log(e);
      },
      websocketClose(e) {
        console.log('断开连接', e.code + " " + e.reason + " " + e.wasClean);
      }
    },
    mounted() {
      this.initWebSocket()
    },
    created() {
      this.userInfo = this.$store.state.userInfo
    }
  }
</script>

<style scoped>
  .user_text {
    position: absolute;
    width: 100px;
    top: -4px;
    left: 10px;
    font-size: 12px
  }

  .clearfix {
    text-align: center;
  }

  .header-card {
    margin-left: 20px;
    width: 300px;
    margin-right: 10px;
  }

  .infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;

  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 800px;
  }

  .top {

    position: absolute;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border-bottom: 6px solid #89b007;
    border-left: 6px solid #fff;
    border-right: 6px solid #fff;
    transform: rotateZ(270deg);

    left: -9px;
    top: 30px;
  }

  .first {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-border-radius: 8px;
    position: absolute;
    /*height: 100px;*/
    font-size: 12px;
    width: 150px;
    background: #89b007;
    left: 9px;
    top: 15px;
  }

  .first p {
    padding: 10px;
    line-height: 1.5;
    color: #FFF;
  }

  .item {
    padding: 30px 0;
  }
</style>